<template>

    <div class="myGpoint-child-keywordComp">
        <div class="title">我订阅的关键词</div>
        <div class="">
            <div class="float_right width_50px pointer more" @click="toggleMore">
                更多

            </div>
            <div class="margin_right_50 label_container">
                <ul class="label_ul" :class="{show_one_line:isShowMore}">
                    <li class="label_ul_li" v-for="(item,key) in levelListData">
                        <Tag closable color="blue" @on-close="clickItem(item.GKSWID)">{{item.GKSWWords}}</Tag>
                        <!--<span :class="{active: key==activeIndex}">{{item.GKSWWords}}<i @click="clickItem(item.GKSWID)">x</i></span>-->
                    </li>
                </ul>
                <div class="clear_both"></div>
            </div>
        </div>
    </div>


</template>
<script>
    import $ from "jquery"

    export default {
        props: [
            "levelListData"
        ],
        data: function () {
            return {

                // 当前选中的索引
                activeIndex: 9999999,
                // 是否显示所有,默认是不显示所有的，及超过一行，则隐藏
                isShowMore: true,
            }
        },
        computed: {

        },
        // 组件初始化完成执行的方法
        mounted: function () {

        },
        methods: {
            // 切换是否显示更多
            toggleMore: function () {
                this.isShowMore = !this.isShowMore;
            },
            clickItem: function (data) {
                this.$emit('delectItem', data)
            }
        }
    }
</script>

<style scoped lang="scss">
    .myGpoint-child-keywordComp {
        margin-top: 10px;

        .title {
            line-height: 35px;
            font-size: 16px;
        }
        .more {
            position: relative;
            padding: 10px 0;
            z-index: 99;
        }

        line-height: 35px;

        .label_container {
            position: relative;
            background: #fafafa;
            padding: 10px 20px;
            margin: 10px 0;

            .label_ul {
                list-style: none;

                &.show_one_line {
                    height: 35px;
                    overflow: hidden;
                }

                .label_ul_li {
                    cursor: pointer;
                    float: left;
                    margin-right: 10px;

                    span {
                        padding: 3px 10px 3px 5px;
                        border-radius: 3px;
                        position: relative;
                        i {
                            position: absolute;
                            font-family: "微软雅黑";
                            width: 12px;
                            height: 12px;
                            top: -10px;
                            right: 0px;
                            color: #666;
                            display: none;
                        }

                        &:hover {
                            background-color: #ccc;
                            i {
                                display: block;
                            }
                        }

                        &.active {
                            background: #6dcef0;
                            padding: 3px 10px;;
                            border-radius: 2px;
                            color: #fff;
                        }
                    }
                }

            }
        }

    }
</style>
